<body class="inside-header inside-aside is-dialog">
<div id="main" role="main">
    <div class="tab-content tab-addtabs">
        <div id="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <section class="content-header hide">
                        <h1>
                            控制台 <small>Control panel</small>
                        </h1>
                    </section>
                    <div class="content">
                        <style>
                            .panel-fieldlist .fieldlist dd ins {
                                width: 20%;
                            }

                            .panel-fieldlist .fieldlist dd input, .panel-fieldlist .fieldlist dd select {
                                width: 100%;
                            }

                            .list-group-item {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }

                            .groups {
                                display: flex;
                                align-items: center;
                            }

                            .title {
                                font-weight: bold;
                                font-size: 16px;
                            }

                            .list-group .list-group-item .label {
                                padding: 5px 10px;
                            }

                            .table-goods > thead > tr > th, .table-goods > tbody > tr > th, .table-goods > thead > tr > td, .table-goods > tbody > tr > td {
                                vertical-align: middle;
                            }

                            .order-status {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }

                            .print-flex {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }

                            @media print {
                                .electronics, .btn-print-page, .memo-operate {
                                    display: none;
                                }
                            }
                        </style>
                        <div id="app">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    账单信息
                                    <a href="javascript:;" onclick="window.print();"
                                       class="btn btn-info btn-xs pull-right btn-print-page">
                                        <i class="fa fa-print"></i>
                                        打印
                                    </a>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <ul class="list-group">
                                                <li class="list-group-item">账单类型：{$row.statement_type_text}</li>
                                                <li class="list-group-item">业务日期：{$row.createtime|date='Y-m-d H:i:s',###}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {if $row.statement_type == 'order'}
                            {notempty name="$row.order"}
                            <div class="panel panel-default">
                                <div class="panel-heading print-flex">
                                    <span>销售账单</span>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <p>销售单号：{$row.order.order_no}</p>
                                            <p>订单创建时间：{$row.order.createtime|date='Y-m-d H:i:s',###}</p>
                                            <p>应收金额（元）：{$row.order.goods_price}</p>
                                            <p>实收金额（元）：{$row.order.pay_price}（{$row.order.pay_type}）</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/notempty}
                            {notempty name="$row.refund"}
                            <div class="panel panel-default">
                                <div class="panel-heading print-flex">
                                    <span>售后账单</span>
                                </div>
                                <div class="panel-body">
                                    {foreach $row.refund as $val}
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <p>售后单号：{$val.order_no}</p>
                                            <p>订单创建时间：{$val.createtime|date='Y-m-d H:i:s',###}</p>
                                            <p>应退金额：{$val.pay_price}</p>
                                            <p>实退金额：{$val.refund_price}（转账退款）</p>
                                        </div>
                                    </div>
                                    {/foreach}
                                </div>
                            </div>
                            {/notempty}
                            {else /}
                            {notempty name="$row.refund"}
                            <div class="panel panel-default">
                                <div class="panel-heading print-flex">
                                    <span>售后账单</span>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <p>售后单号：{$row.refund.order_no}</p>
                                            <p>订单创建时间：{$row.refund.createtime|date='Y-m-d H:i:s',###}</p>
                                            <p>应退金额：{$row.refund.pay_price}</p>
                                            <p>实退金额：{$row.refund.refund_price}（转账退款）</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/notempty}
                            {/if}
                            <div class="panel panel-default">
                                <div class="panel-heading print-flex">
                                    <span>其他凭证信息</span>
                                </div>
                                <div class="panel-body">
                                    <div class="row" style="padding: 0 15px;">
                                        <tr>
                                            {notempty name="$row.images"}
                                            {foreach $row.images as $val}
                                            <td><a href="javascript:"><img class="img-lg img-center" data-tips-image src="{$val}"></a></td>
<!--                                            <td class="text-center">-->
<!--                                                <img style="cursor: pointer;" data-tips-image src="{$val}" class="img-lg" alt="">-->
<!--                                            </td>-->
                                            {/foreach}
                                            {/notempty}
                                        </tr>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span>日志</span>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-bordered table-goods">
                                        <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>操作人</th>
                                            <th>操作时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {notempty name="$row.ext"}
                                        {foreach $row.ext as $key => $val}
                                        <tr>
                                            <th scope="row">{$key + 1}</th>
                                            <td>{$val.oper_name}(ID: {$val.oper_id})</td>
                                            <td>{$val.createtime|date='Y-m-d H:i:s',###}</td>
                                        </tr>
                                        {/foreach}
                                        {/notempty}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $('body').on('click', '[data-tips-image]', function () {
        var img = new Image();
        var imgWidth = this.getAttribute('data-width') || '480px';
        img.onload = function () {
            var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
            Layer.open({
                type: 1, area: imgWidth, title: false, closeBtn: 1,
                skin: 'layui-layer-nobg', shadeClose: true, content: $content,
                end: function () {
                    $(img).remove();
                },
                success: function () {

                }
            });
        };
        img.onerror = function (e) {

        };
        img.src = this.getAttribute('data-tips-image') || this.src;
    });
</script>